<template>
    <div>
        <div class="score-box">
            <p>分数：{{score*10}} 用时{{allTime}}秒</p>
            <p>{{scoreTip}}</p>
        </div>
        <div class="share" @click="share"></div>
        <p class="des">关注葡萄之家，获取答案</p>
        <div class="code"></div>
        <div class="mask" v-show="isShare" @click="cancelShare">
            <div class="image"></div>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
    name:'Score',
    computed:{
        ...mapState(['answerid','allTime','timer']),
        score(){
            let v=0;
            this.answerid.forEach((element,index) => {
                if(element==this.rightAnswer[index]){
                    v++;
                }
            });
            return v;
        },
        scoreTip(){
            if(this.score==0){
                return ''
            }else{
                return this.scoreTipsArr[this.score-1];
            }
        }
    },
    data(){
        return {
            rightAnswer: [0,1,1,2,3], //正确答案
            scoreTipsArr:['你说，是不是把知识都还给小学老师了？','还不错，但还需要继续加油哦！','不要嘚瑟还有进步的空间！','智商离爆表只差一步了！','你也太聪明啦，葡萄之家欢迎你！'],
            isShare:false
        }
    },
    mounted() {
        clearInterval(this.timer);
        // 当组件挂载后，改变body的背景图片
        document.body.style.backgroundImage = "url('4-1.jpg')";
        document.body.style.backgroundSize='100% 103%';
  },
  methods:{
    share(){
        this.isShare=true;
    },
    cancelShare(){
        this.isShare=false;
    }
  }
}
</script>

<style lang="css" scoped>
    .score-box {
        width: 300px;
        height: 300px;
        background: url('../assets/images/4-2.png') no-repeat;
        background-size: 100% 100%;
        margin: 20px auto;
    }

    .score-box p:first-child {
        position: absolute;
        top: 150px;
        left: 100px;
        font-size: 25px;
        font-weight: bold;
        color: red;;
    }

    .score-box p:last-child {
        position: absolute;
        top: 200px;
        left: 60px;
        font-size: 18px;
        font-weight: bold;
        color: black;
        padding-left: 10px;
        padding-right: 46px;
    }

    .share {
        width: 150px;
        height: 100px;
        background: url('../assets/images/4-3.png') no-repeat;
        background-size: 100%;
        margin: 5px auto;
    }

    .des {
        font-size: 18px;
        font-weight: bold;
        margin: 5px auto;
        text-align: center;
    }

    .code {
        width: 150px;
        height: 150px;
        background: url('../assets/images/4-4.png') no-repeat;
        background-size: 100% 100%;
        margin: 30px auto;
    }

    .mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000; /* 确保遮罩在其他内容之上 */
        opacity: 0.8;
        background-color: rgb(29, 27, 27);
    }

    .mask .image {
        position: absolute;
        width: 320px;
        height: 300px;
        background: url('../assets/images/5-2.png') no-repeat;
        background-size: 100% 100%;
        top: 0px;
        right: 20px;
    }

</style>